<template>
  <view class="normal-login-container">
    <view class="logo-content align-center justify-center flex">
      <image style="width: 120rpx;height: 120rpx;" :src="globalConfig.appInfo.logo" mode="widthFix"></image>
      <text class="title">吴红光水灰比计算器</text>
    </view>
    <view class="login-form-content">
      <view class="input-item flex align-center">
        <text class="label">现水灰比:</text>
        <input v-model="form.practicalValue" class="input input-wide" type="text" placeholder="请输入" maxlength="7"/>
        <text class="label1">：1</text>
      </view>
      <view class="input-item flex align-center">
        <text class="label">计划水灰比:</text>
        <input v-model="form.realityValue" type="text" class="input input-wide" placeholder="请输入" maxlength="7"/>
        <text class="label1">：1</text>
      </view>
      <view class="input-item flex align-center">
        <text class="label">总体积:</text>
        <input v-model="form.volumeValue" type="text" class="input input-wide" placeholder="请输入" maxlength="8"/>
        <text class="label2">L</text>
      </view>
      <view class="action-btn">
        <button @click="handle" class="login-btn cu-btn block bg-blue lg round">计算</button>
      </view>
      <!-- 显示计算结果 -->
      <view v-if="result" class="result">
        <text>结果{{ result }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      globalConfig: getApp().globalData.config,
      form: {
        practicalValue: "",
        volumeValue: "",
        realityValue: "",
      },
      result: "" // 用于存储计算结果
    }
  },
  created() {
    //this.getCode()
  },
  methods: {
    // 计算方法
    async handle() {
      if (this.form.practicalValue === "") {
        this.$modal.msgError("请输入现水灰比")
      } else if (this.form.volumeValue === "") {
        this.$modal.msgError("请输入总体积")
      } else if (this.form.realityValue === "") {
        this.$modal.msgError("请输入计划水灰比")
      } else {
        // 进行计算

        const practicalValue = parseFloat(this.form.practicalValue);
        const volumeValue = parseFloat(this.form.volumeValue);
        const realityValue = parseFloat(this.form.realityValue);
        // console.log("现水灰比", practicalValue)
        // console.log("总体积", volumeValue)
        // console.log("计划水灰比", realityValue)

        let result = ": 计算错误！"
        // 现水灰比小于计划水灰比
        if (practicalValue < realityValue) {
          // 保留两位小数
          const value = volumeValue * (realityValue - practicalValue) / (practicalValue + 0.31746)
          result = "加水: " + value.toFixed(2) +"kg";
        } else if (practicalValue > realityValue) {
          const value = (volumeValue * (practicalValue - realityValue)) / ((practicalValue + 0.31746) * realityValue)
          result = "加灰: " + value.toFixed(2)+"kg";
        } else if (practicalValue === realityValue) {
          result = ": 水灰比相等，无需操作！";
        }
        // 更新结果
        this.result = result;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
page {
  background-color: #ffffff;
}
.normal-login-container {
  width: 100%;

  .logo-content {
    width: 100%;
    font-size: 21px;
    text-align: center;
    padding-top: 15%;

    image {
      border-radius: 4px;
    }

    .title {
      margin-left: 10px;
      font-weight: bold;
    }
  }

  .login-form-content {
    margin: 20px auto;
    margin-top: 15%;
    width: 80%;

    .input-item {
      margin: 20px auto;
      background-color: #f5f6f7;
      height: 45px;
      border-radius: 5px;
      display: flex; // 使用 flex 布局
      align-items: center; // 垂直居中对齐
      padding: 0 10px; // 添加内边距以便标签和输入框之间有间距

      .label {
        width: 80px; // 设置标签宽度
        margin-right: 10px; // 标签和输入框之间的间距
        font-size: 14px; // 标签字体大小
        text-align: right; // 标签右对齐
        //加粗
        font-weight: bold;
      }
      .label1 {
        width: 80px; // 设置标签宽度
        margin-right: 10px; // 标签和输入框之间的间距
        font-size: 14px; // 标签字体大小
        text-align: left; // 标签右对齐
        //加粗
        font-weight: bold;
      }
      .label2 {
        width: 80px; // 设置标签宽度
        margin-right: 10px; // 标签和输入框之间的间距
        margin-left: 11px;
        font-size: 14px; // 标签字体大小
        text-align: left; // 标签右对齐
        //加粗
        font-weight: bold;
      }

      .input {
        height: 100%;
        border: none; // 移除默认边框
        background: none; // 移除默认背景
        font-size: 14px;
        font-weight: bold;
        padding: 0 10px; // 输入框内边距
      }
    }

    .login-btn {
      margin-top: 40px;
      height: 45px;
      font-weight: bold;
    }

    .result {
      margin-top: 20px;
      text-align: center;
      font-size: 24px; // 增加字体大小
      background-color: #e0f7fa; // 添加背景颜色
      border: 1px solid #00acc1; // 添加边框
      padding: 10px; // 增加内边距
      border-radius: 5px; // 添加圆角
      color: #00796b; // 设置文本颜色
    }
    .input-wide {
      text-align: right;
      width: 30%;
    }
  }
}
</style>
